<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>商品列表</title>
    <link rel="stylesheet" href="./iconfont/fonts/iconfont.css">
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/sosuobiao.css" />
</head>

<body>
    <div class="header">
        <span class="iconfont icon-zuojiantou" onclick="window.history.go(-1);"></span>
        <p>商品列表</p>
    </div>
    <div class="search">
        <div class="input">
            <i class="iconfont icon-fangdajing"></i>
            手机
        </div>
        <div class="icon">
            <i class="iconfont icon-a-10Icaidanbuju"></i>
            <i class="iconfont icon-huifumorenbuju"></i>
        </div>
    </div>
    <div class="content">
        <ul class="condition">
            <li class="active">综合</li>
            <li>销量</li>
            <li class="last">价格
                <i class="iconfont icon-xialajiantou1"></i>
                <i class="iconfont icon-xiajiantou"></i>
            </li>
        </ul>
        <div class="main">
        </div>
        <div class="mainLine">
        </div>
    </div>
</body>

</html>
<script src="./axios.js"></script>
<script src="./js/commit.js"></script>
<script>
    // 切换
    const qie = document.querySelector('.icon-a-10Icaidanbuju')
    const huan = document.querySelector('.icon-huifumorenbuju')
    const main = document.querySelector('.main')
    const mainLine = document.querySelector('.mainLine')
    huan.addEventListener('click', function () {
        qie.style.display = 'block'
        huan.style.display = 'none'
        document.querySelector('.main').style.display = 'none'
        document.querySelector('.mainLine').style.display = 'block'
        res(mainLine)
        render(res, mainLine)
    })
    qie.addEventListener('click', async function () {
        qie.style.display = 'none'
        huan.style.display = 'block'
        document.querySelector('.main').style.display = 'block'
        document.querySelector('.mainLine').style.display = 'none'
        document.querySelector('.main').style.display = ''
    })
    let name = location.search;
    name = decodeURI(name.slice(name.indexOf("=") + 1))
    console.log(name);
    document.querySelector('.input').innerHTML = ` <i class="iconfont icon-fangdajing"></i>${name}`
    document.querySelector('.input').addEventListener('click', function () {
        location.href = './搜索页.html'
    })
    let sortType = ''
    let sortPrice

    const res = async (dom) => {
        const data = await axios.get('/goods/list', {
            params: {
                goodsName: name,
                sortType,
                sortPrice
            }
        })
        list = data.data.data.list.data
        console.log(list)
        if (list.length === 0) {
            return dom.innerHTML = `
            <div class="sun">
                <img src="./imgs/empty.png" alt="" />
                <p>亲，暂无相关数据</p>
            </div>
            `
        }
        dom.innerHTML = list.map(item => {
            return `
        <a href="./详情页面.html?id=${item.goods_id}">
            <div class="goods-item">
                <img src="${item.goods_image}" alt="" />
                <div class="detail">
                    <p class="ellipsis-2">
                        ${item.goods_name}
                    </p>
                    <p class="sales">${qie.style.display === 'block' ? '已售' + item.goods_sales + '件' : ''}</p>
                    <div class="price">
                        <span class="one">￥${item.goods_price_max}</span>
                        <span class="two">${item.line_price_max === '0.00' ? '' : '￥' + item.line_price_max}</span>
                    </div>
                </div>
            </div>
        </a>
            `
        }).join('')
    }
    res(main)
    function render(text, index) {
        document.querySelector('.condition').addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                document.querySelector('.content .active').classList.remove('active')
                e.target.classList.add('active')
                if (e.target.innerHTML === '销量') {
                    sortType = 'sales'
                    text(index)
                } else if (e.target.innerHTML === '综合') {
                    sortType = 'all'
                    text(index)
                } else if (e.target.classList.value === 'last active') {
                    // sortPrice = 1 ? 0 : 1
                    sortType = 'price'
                    text(index)
                }

            }
        })
    }
    render(res, main)
</script>